<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="showDialog">添加</el-button>
    </div>
    <lists
      :specsArr="specsArr"
      :total="total"
      :size="size"
      @pagelist="pagelist"
      @updata="updata"
      @addSpeac="addSpeac"
      @delspecs="delspecs"
    ></lists>
    <forms
      :obj="obj"
      @addspecsadd="addspecsadd"
      @canle="canle"
      ref="curId"
      @addSpeac="addSpeac"
    ></forms>
  </div>
</template>

<script>
import lists from "./list.vue";
import forms from "./form.vue";
import { specsList, specsCount } from "../../request/api.js";
export default {
  components: {
    lists,
    forms,
  },
  data() {
    return {
      obj: {
        isshow: false,
      },
      size: 2,
      page: 1,
      specsArr: [],
      total: 0,
    };
  },
  methods: {
    delspecs(){
      // console.log(this.page);
       specsList({ size: this.size, page: this.page })
        .then((d) => {
          if (d.data.code == 200) {
            if(d.data.list == null){
              --this.page
              this.getSpecs()
            }
          }
        })
       this.getSpecs();
      this.getCount();
    },
    addSpeac() {
      this.obj.isshow = false;
      this.getSpecs();
      this.getCount();
    },
    updata(id) {
      this.obj.isshow = true;
      this.$refs.curId.getInfo(id);
    },
    pagelist(n) {
      this.page = n;
      this.getSpecs();
      this.getCount();
    },
    canle() {
      this.obj.isshow = false;
    },
    showDialog() {
      this.obj.isshow = true;
    },
    addspecsadd() {
      this.obj.isshow = false;
      this.getSpecs();
      this.getCount();
    },
    getSpecs() {
      // console.log(this.page,this.size,88887);
      specsList({ size: this.size, page: this.page })
        .then((d) => {
          if (d.data.code == 200) {
            this.specsArr = d.data.list;
          }
        })
    },
    getCount() {
      specsCount()
        .then((d) => {
          if (d.data.code == 200) {
            this.total = d.data.list[0].total;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    this.getSpecs();
    this.getCount();
  },
};
</script>

<style>
.btn {
  margin: 30px 0;
}
</style>